| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220 |
1
14
14
23
23
23
1
22
22
22
3
3
3
22
22
14
14
14
59
9
14
56
14
56
| /**
* @ngdoc directive
* @name patternfly.charts.directive:pfUtilizationBarChart
* @restrict E
*
* @description
* Component for rendering a utilization bar chart
* There are three possible fill colors for Used Percentage, dependent on whether or not there are thresholds:<br/>
* <ul>
* <li>When no thresholds exist, or if the used percentage has not surpassed any thresholds, the indicator is blue.
* <li>When the used percentage has surpassed the warning threshold, but not the error threshold, the indicator is orange.
* <li>When the used percentage has surpassed the error threshold, the indicator is is red.
* </ul>
*
* @param {object} chartData the data to be shown in the utilization bar chart<br/>
* <ul style='list-style-type: none'>
* <li>.used - number representing the amount used
* <li>.total - number representing the total amount
* <li>.dataAvailable - Flag if there is data available - default: true
* </ul>
*
* @param {object=} chart-title The title displayed on the left-hand side of the chart
* @param {object=} chart-footer The label displayed on the right-hand side of the chart. If chart-footer is not
* specified, the automatic footer-label-format will be used.
* @param {object=} layout Various alternative layouts the utilization bar chart may have:<br/>
* <ul style='list-style-type: none'>
* <li>.type - The type of layout to use. Valid values are 'regular' (default) displays the standard chart layout,
* and 'inline' displays a smaller, inline layout.</li>
* <li>.titleLabelWidth - Width of the left-hand title label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
* <li>.footerLabelWidth - Width of the right-hand used label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
* </ul>
* @param {string=} footer-label-format The auto-format of the label on the right side of the bar chart when chart-footer
* has not been specified. Values may be:<br/>
* <ul style='list-style-type: none'>
* <li>'actual' - (default) displays the standard label of '(n) of (m) (units) Used'.
* <li>'percent' - displays a percentage label of '(n)% Used'.</li>
* </ul>
* @param {object=} units to be displayed on the chart. Examples: "GB", "MHz", "I/Ops", etc...
* @param {string=} threshold-error The percentage used, when reached, denotes an error. Valid values are 1-100. When the error threshold
* has been reached, the used donut arc will be red.
* @param {string=} threshold-warning The percentage usage, when reached, denotes a warning. Valid values are 1-100. When the warning threshold
* has been reached, the used donut arc will be orange.
* @param {function(items)} avaliableTooltipFunction A passed in tooltip function which can be used to overwrite the default available tooltip behavior
* @param {function(items)} usedTooltipFunction A passed in tooltip function which can be used to overwrite the default usedtooltip behavior
*
* @example
<example module="patternfly.example">
<file name="index.html">
<div ng-controller="ChartCtrl">
<label class="label-title">Default Layout, no Thresholds</label>
<pf-utilization-bar-chart chart-data=data1 chart-title=title1 units=units1></pf-utilization-bar-chart>
<br>
<label class="label-title">Inline layout, Custom tooltips'</label>
<pf-utilization-bar-chart chart-data=data1 chart-title=title1 units=units1
available-tooltip-function="availableTooltip(title1, data1)"
used-tooltip-function="usedTooltip(title1, data1)"></pf-utilization-bar-chart>
<br>
<label class="label-title">Inline Layouts with Error, Warning, and Ok Thresholds</label>
<pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60">../utilization-trend/utilization-trend-chart-directive.js</pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<br>
<label class="label-title">Inline layout, Footer label percent, and Custom chart footer labels</label>
<pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline footer-label-format='percent' units=units2 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline footer-label-format='percent' units=units3 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-data=data4 chart-title=title4 chart-footer=footer1 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<pf-utilization-bar-chart chart-data=data5 chart-title=title5 chart-footer=footer2 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></pf-utilization-bar-chart>
<div class="row">
<div class="col-md-6">
<form role="form"">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" ng-model="data1.dataAvailable">Data Available</input>
</label>
</div>
</form>
</div>
</div>
</div>
</file>
<file name="script.js">
angular.module( 'patternfly.example', ['patternfly.charts', 'patternfly.card']);
angular.module( 'patternfly.example' ).controller( 'ChartCtrl', function( $scope, $interval ) {
$scope.title1 = 'RAM Usage';
$scope.units1 = 'MB';
$scope.data1 = {
'dataAvailable': true,
'used': '8',
'total': '24'
};
$scope.title2 = 'Memory';
$scope.units2 = 'GB';
$scope.data2 = {
'used': '25',
'total': '100'
};
$scope.title3 = 'CPU Usage';
$scope.units3 = 'MHz';
$scope.data3 = {
'used': '420',
'total': '500'
};
$scope.title4 = 'Disk Usage';
$scope.units4 = 'TB';
$scope.data4 = {
'used': '350',
'total': '500'
};
$scope.title5 = 'Disk I/O';
$scope.units5 = 'I/Ops';
$scope.data5 = {
'used': '450',
'total': '500'
};
$interval(function () {
$scope.data5.used = Number($scope.data5.used) + 40;
if ($scope.data5.used > 500) {
$scope.data5.used = 10;
}
}, 1000);
$scope.layoutInline = {
'type': 'inline'
};
$scope.footer1 = '<strong>500 TB</strong> Total';
$scope.footer2 = '<strong>450 of 500</strong> Total';
$scope.availableTooltip = function (title, data){
return '<div>Title: ' + title + '</div><div>Available: ' + data.total + '</div>';
};
$scope.usedTooltip = function (title, data){
return '<div>Title: ' + title + '</div><div>Usage: ' + data.used + 'MB</div>';
};
});
</file>
</example>
*/
angular.module('patternfly.charts').component('pfUtilizationBarChart', {
bindings: {
chartData: '=',
chartTitle: '=',
chartFooter: '=',
units: '=',
thresholdError: '=?',
thresholdWarning: '=?',
footerLabelFormat: '@?',
layout: '=?',
usedTooltipFunction: '&?',
availableTooltipFunction: '&?'
},
templateUrl: 'charts/utilization-bar/utilization-bar-chart.html',
controller: function ($timeout) {
'use strict';
var ctrl = this, prevChartData, prevLayout;
ctrl.updateAll = function () {
// Need to deep watch changes
prevChartData = angular.copy(ctrl.chartData);
prevLayout = angular.copy(ctrl.layout);
if (!ctrl.chartData) {
return;
}
//Calculate the percentage used
Eif (!isNaN(ctrl.chartData.used) && !isNaN(ctrl.chartData.total) && (ctrl.chartData.total > 0)) {
ctrl.chartData.percentageUsed = Math.round(100 * (ctrl.chartData.used / ctrl.chartData.total));
} else {
ctrl.chartData.percentageUsed = 0;
}
if (ctrl.thresholdError || ctrl.thresholdWarning) {
ctrl.isError = (ctrl.chartData.percentageUsed >= ctrl.thresholdError);
ctrl.isWarn = (ctrl.chartData.percentageUsed >= ctrl.thresholdWarning &&
ctrl.chartData.percentageUsed < ctrl.thresholdError);
ctrl.isOk = (ctrl.chartData.percentageUsed < ctrl.thresholdWarning);
}
//Animate in the chart load.
ctrl.animate = true;
$timeout(function () {
ctrl.animate = false;
}, 0);
};
ctrl.$onChanges = function (changesObj) {
ctrl.updateAll();
};
ctrl.$doCheck = function () {
// do a deep compare on chartData and layout
if (!angular.equals(ctrl.chartData, prevChartData) || !angular.equals(ctrl.layout, prevLayout)) {
ctrl.updateAll();
}
};
ctrl.usedTooltipMessage = function () {
return ctrl.usedTooltipFunction ? ctrl.usedTooltipFunction() : _.get(ctrl.chartData, 'percentageUsed', 'N/A') + '% Used';
};
ctrl.availableTooltipMessage = function () {
return ctrl.availableTooltipFunction ? ctrl.availableTooltipFunction() : (100 - _.get(ctrl.chartData, 'percentageUsed', 0)) + '% Available';
};
}
});
|